// 引入 react 依赖
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { Text, View, Image, TextInput, TouchableOpacity, ImageBackground, ScrollView } from 'react-native';

// 引入第三方依赖
import _ from 'lodash';
import pureRender from 'pure-render-decorator';
import { Actions } from 'react-native-router-flux';
import Icon from 'react-native-vector-icons/Ionicons';
import SplashScreen from 'react-native-splash-screen'

// antd 按需加载
import { Tabs, Toast, Portal } from '@ant-design/react-native';

// 引入 处理数据 所需文件
import { login, getCode } from '../../module/module.js'

// 引入样式
import Style from './style/style.js';

// 引入公用组件
import { Status, NavBar, CacheImage, Layout } from '../../components/index.js'

// 引入专用组件
import { } from './components'

// 引入工具包
import { u197, background } from '../../util/images.js'
import { size, ScreenWidth } from '../../util/utils.js'

class Login extends Component {

  constructor(props) {
    super(props);
    this.state = {
      send: '获取验证码',
      disable: false,
      submitDisable: false,
      phone: '18824852014',
      code: '123456',
    };

  }

  componentDidMount() {
    const { dispatch } = this.props
    SplashScreen.hide();
  }

  componentWillUnmount() {
    clearInterval(this.time);
  }

  getCode() {
    const { user } = this.props;
    const { disable, phone, code } = this.state;
    if (!phone) {
      Toast.info('请输入手机号', 1);
      return;
    }
    if (!/^[1][3,4,5,7,8][0-9]{9}$/.test(phone)) {
      Toast.info('手机号不正确', 1);
      return;
    }
    if (disable) {
      return;
    }
    this.setState({
      disable: true,
    }, () => {
      getCode({
        phone: phone,
      }).then(res => {
        let send = 60;
        this.time = setInterval(() => {
          this.setState({
            send: `${send}s后重新获取`,
          });
          send--;
          if (send < 0) {
            clearInterval(this.time);
            this.setState({
              disable: false,
              send: '获取验证码',
            });
          }
        }, 1000);
        Toast.info('发送成功', 1)
      }).catch(error => {
        Toast.info(error.message);
        this.setState({
          disable: false,
        });
      });
    });
  }


  login() {
    const { dispatch } = this.props;
    const { disable, phone, code } = this.state;
    if (this.btnDisable()) {
      return
    }
    if (!phone) {
      Toast.info('请输入手机号', 1);
      return;
    }
    if (!/^[1][3,4,5,7,8][0-9]{9}$/.test(phone)) {
      Toast.info('手机号格式不正确', 1);
      return;
    }
    if (!code) {
      Toast.info('请输入验证码', 1);
      return;
    }
    login({
      phone: phone,
      code: code,
      fun: '0'
    })
  }



  handlerUserTkQyk() {

  }

  btnDisable() {
    const { disable, phone, code } = this.state;
    if (phone.length == 11 && code.length == 6) {
      return false
    } else {
      return true
    }
  }

  render() {
    const { send, phone, code } = this.state
    return (
      <Layout style={{ backgroundColor: '#0A0C21' }} statusStyle={{}}>
        <NavBar
          type="transparent"
          title="重置密码"
          back={true}
        />
        <ScrollView style={{ flex: 1, }}>
          <View style={{ paddingHorizontal: 38, marginTop: 8 }}>
            <Text style={{ fontSize: 12, color: '#8A90A8', lineHeight: 16, marginTop: 8 }}>6-16位，至少含数字/字母/字符2种结合</Text>
          </View>
          <View style={{
            marginTop: 20,
            paddingHorizontal: 38,
          }}
          >
            <View style={{
            }}>
              <View style={{
                flexDirection: 'row',
                alignItems: 'center',
                height: 60,
                borderBottomColor: '#232B54',
                borderBottomWidth: .5
              }}
              >
                <TextInput
                  onChangeText={(phone) => this.setState({ phone })}
                  defaultValue={phone}
                  keyboardType="numeric"
                  placeholder="请输入6-16位新密码"
                  placeholderTextColor="#8A90A8"
                  dataDetectorTypes="phoneNumber"
                  style={{
                    flex: 1,
                    fontSize: 14,
                    borderWidth: 0,
                    color: '#fff',
                  }}
                  underlineColorAndroid="transparent"
                />
              </View>
              <View style={{
                flexDirection: 'row',
                alignItems: 'center',
                height: 60,
                borderBottomColor: '#232B54',
                borderBottomWidth: .5
              }}
              >
                <TextInput
                  onChangeText={(code) => this.setState({ code })}
                  defaultValue={code}
                  keyboardType="numeric"
                  placeholder="再次输入新密码"
                  placeholderTextColor="#8A90A8"
                  style={{
                    flex: 1,
                    fontSize: 14,
                    borderWidth: 0,
                    color: '#fff',
                  }}
                  underlineColorAndroid="transparent"
                />
              </View>
            </View>
            <View style={{
              marginTop: 40,
            }}>
              <TouchableOpacity
                activeOpacity={1}
                onPress={() => {
                  // this.login()
                  Actions.popTo('user')
                }}
                style={{
                  color: '#FFFFFF',
                  backgroundColor: this.btnDisable() ? '#252C4F' : '#7484FF',
                  borderRadius: 4,
                  alignItems: 'center',
                  justifyContent: 'center',
                  height: 40,
                }}
              >
                <Text style={{ fontSize: 14, color: this.btnDisable() ? '#8A90A8' : '#fff', lineHeight: 16, }}>确定</Text>
              </TouchableOpacity>
            </View>
          </View>
        </ScrollView>
      </Layout>
    );
  }
}


export default connect(({ userInfo }) => ({
  userInfo,
}))(pureRender(Login))
